<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/documentMyReady.js"></script>
    <style>
        body{
            padding: 0;
            margin: 0;
        }
        .wrap{
            width: 100%;
        }
        .wrap .top-logo{
            width: 100%;
            height: 50px;
            background-color: aqua;
        }
        .wrap .top-wrap{
            width: 100%;
            height: 120px;
            background-color: blueviolet;
        }
        .wrap .top-wrap.top-wrap-fixed{
            position: fixed;
            top: 0;
        }
    </style>
    <script>
        document.myReady(function(){
            //获取要操作的dom元素
            let topWrap = document.getElementsByClassName('top-wrap')[0];
            //监听页面滚动事件
            window.onscroll = function() {
                //拿到页面滚动的距离
                let scrollTop = document.documentElement.scrollTop;
                //判断页面滚动大于50px加上class
                if(scrollTop > 50){
                    topWrap.className = 'top-wrap top-wrap-fixed';
                }else{
                    topWrap.className = 'top-wrap';
                }
            }            
            
        })
    </script>
</head>
<body>
    <header class="wrap">
        <div class="top-logo">
            text-logo
        </div>
        <div class="top-wrap">
            text-position-top
        </div>
    </header>
    <section>
        <h1>1</h1>
        <h1>2</h1>
        <h1>3</h1>
        <h1>4</h1>
        <h1>5</h1>
        <h1>6</h1>
        <h1>7</h1>
        <h1>8</h1>
        <h1>9</h1>
        <h1>10</h1>
        <h1>11</h1>
        <h1>12</h1>
        <h1>13</h1>
        <h1>14</h1>
        <h1>15</h1>
        <h1>16</h1>
        <h1>17</h1>
        <h1>18</h1>
        <h1>19</h1>
        <h1>20</h1>
        <h1>21</h1>
        <h1>22</h1>
        <h1>23</h1>
        <h1>24</h1>
        <h1>25</h1>
        <h1>26</h1>
        <h1>27</h1>
        <h1>28</h1>
        <h1>29</h1>
        <h1>30</h1>
        <h1>31</h1>
        <h1>32</h1>
        <h1>33</h1>
        <h1>34</h1>
        <h1>35</h1>
        <h1>36</h1>
        <h1>37</h1>
        <h1>38</h1>
        <h1>39</h1>
        <h1>40</h1>
        <h1>41</h1>
        <h1>42</h1>
        <h1>43</h1>
        <h1>44</h1>
        <h1>45</h1>
        <h1>46</h1>
        <h1>47</h1>
        <h1>48</h1>
        <h1>49</h1>
        <h1>50</h1>
    </section>
</body>
</html>